﻿@{
    ViewBag.Title = "Index";
    ViewBag.Active = "Task";
}
@section ViewScripts
{
    <script type="text/javascript">
        $(function () {
            function task(data) {
                this.taskId = ko.observable(data.TaskId);
                this.taskName = ko.observable(data.TaskName);
                this.project = ko.observable(data.ProjectName);
            }

            function taskViewModel() {
                var self = this;
                self.Tasks = ko.observableArray([]);

                $.getJSON("/Task/GetTasks/", function (allData) {
                    var mappedTasks = $.map(allData, function (item) {
                        return new task(item);
                    });

                    self.Tasks(mappedTasks);
                });

                self.PageSize = ko.observable(15);
                self.PageIndex = ko.observable(0);
                self.PreviousPage = function () { self.PageIndex(self.PageIndex() - 1); };
                self.NextPage = function () { self.PageIndex(self.PageIndex() + 1); };

                self.PagedRows = ko.dependentObservable(function () {
                    var size = self.PageSize();
                    var start = self.PageIndex() * size;
                    return self.Tasks.slice(start, size + start);

                });

                self.MaxPageIndex = ko.dependentObservable(function () {
                    return Math.ceil(self.Tasks().length / self.PageSize()) - 1;
                });
            }
            ko.applyBindings(new taskViewModel());
        });
    </script>
}
<h2>
    Index</h2>
Welcome, What do you want to do?
<br />
<ul>
    <li>@Html.ActionLink("Create a Task", "Create")</li>
    <li>@Html.ActionLink("Edit a Task", "Edit", new { id = 2 })</li>
</ul>
<div>
    <table id="tasks" class="table table-striped">
        <thead>
            <tr>
                <th>
                    Task Id
                </th>
                <th>
                    Task Name
                </th>
                <th>
                    Project
                </th>
                <th>
                </th>
            </tr>
        </thead>
        <tbody data-bind="foreach: PagedRows">
            <tr>
                <td>
                    <span data-bind="text: taskId"></span>
                </td>
                <td>
                    <span data-bind="text: taskName"></span>
                </td>
                <td>
                    <span data-bind="text: project"></span>
                </td>
                <td>
                    <a href="#">Select</a>
                </td>
            </tr>
        </tbody>
    </table>
    <a href="#" data-bind="click: PreviousPage, visible: PageIndex() > 0">Previous</a>
    <a href="#" data-bind="click: NextPage, visible: PageIndex() < MaxPageIndex()">Next</a>
</div>
